<template>
  <div
    class="platform-reco"
    :style="{
      height: compData.style.height + 'px',
      'border-top-left-radius': compData.data.borderRadiusTop + 'px',
      'border-top-right-radius': compData.data.borderRadiusTop + 'px',
      'border-bottom-left-radius': compData.data.borderRadiusBottom + 'px',
      'border-bottom-right-radius': compData.data.borderRadiusBottom + 'px',
    }"
  >
    <div class="topBox sa-flex sa-row-between ">
		<div class="topBox-title" :style="{color: compData.data.title.color}">
			{{ compData.data.title.text }}
		</div>
		<el-icon><ArrowRight /></el-icon>
	</div>
	<div class="bottomBox sa-flex">
		<div class="bottomBox-item sa-flex" v-for="(item, index) in compData.data.list" :key="index">
			<div class="bottomBox-item-img">
				<sa-image :url="item.src" size="42" radius="0" :suffix="null"></sa-image>
			</div>
			<div class="bottomBox-item-right">
				<div class="bottomBox-item-title sa-line-1" :style="{color: item.title.color}">
					{{ item.title.text }}
				</div>
				<div class="bottomBox-item-subtitle sa-line-1" :style="{color: item.subtitle.color}">
					{{ item.subtitle.text }}
				</div>
			</div>
		</div>
	</div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .platform-reco {
    overflow: hidden;
	.topBox{
		.topBox-title{
			padding: 15px 8px;
		}
	}
	.bottomBox{
		padding:  0  8px 12px;
		justify-content: space-evenly;
		.bottomBox-item{
			flex: 1;
			.bottomBox-item-img{

			}
			.bottomBox-item-right{
				height: 42px;
				margin-left: 5px;
			}
			.bottomBox-item-title{
				font-size: 16px;
			}
			.bottomBox-item-subtitle{
				font-size: 14px;
			}
		}
	}
  }
</style>
